$(function() {
    var timer = null;

    showTip();

    $('#dota2user').on('mouseenter', '.user.in', function() {
        var that = $(this);
        var pop = that.find('.pop');

        if(pop.length) return;

        $.get('/user/info', function(data) {
            var json = JSON.parse(data);
            var html = createUserInfo(json);
            that.append($(html));
        });
    }).on('mouseleave', '.user.in', function(e) {
        var that = $(this);
        var pop = that.find('.pop');
        var target = $(e.relatedTarget);
        timer = setTimeout(function() {
            if(target.is(pop) || target.parents().is(pop)) return;
            else pop.remove();
        }, 500);

    });

    $('#close-pop').on('click', function() {
        var pop = $(this).parents('.pop');
        pop.remove();
        localStorage.setItem('isShowedLoginTip', true)
    })
});

function showTip() {
    var btnLogin = $('#btn-login');
    var pop = $('<div class="pop in">登陆后可查看账号信息<span><i class="nav_icon icon-close" id="close-pop"></i></span></div>');
    var isShowedLoginTip = localStorage.getItem('isShowedLoginTip');

    if(isShowedLoginTip !== 'true') {
        pop.appendTo(btnLogin);
    }

}

function createUserInfo(data) {
    var html = ['<div class="pop"><div class="info_top">',
        '<h3>DOTA2账号详情<a href="http://members.dota2.com.cn/info" target="_blank"><i class="nav_icon icon-help"></i></a></h3>',
        '<div class="info_detail">',
        '<div class="avatar"><img src="' + data['avatarfull'] + '" alt="' + data['personaname'] + '" /></div>',
        '<ul class="items">',
        '<li class="item"><span>游戏昵称：</span><span>' + data['personaname'] + '</span></li>',
        '<li class="item"><span>DOTA2ID：</span><span>' + data['dota2id'] + '</span></li>',
        '<li class="item"><span>账号状态：</span><span class="' + (data['personastate'] == '在线' ? 'active' : '') + '">' + data['personastate'] + '</span></li>',
        '<li class="item"><span>上次在线：</span><span>' + data['lastlogoff'] + '</span></li>',
        '</ul></div>',
        '<div class="passport"><span>完美通行证：</span><span>' + data['username'] + '</span></div>',
        '</div>',
        '<div class="info_bottom">',
        '<div class="scurity"><span>账号安全：</span>',
        '<div>',
        '<span class="' + (data['isIndulge'] ? 'active' : '') + '"><i class="nav_icon icon-reg"></i>' + (data['isIndulge'] ? '已' : '未') + '登记</span>',
        '<span class="' + (data['mobile'] ? 'active' : '') + '"><i class="nav_icon icon-mobile"></i>' + (data['mobile'] ? '已' : '未') + '绑定</span>',
        '<span class="' + (data['email'] ? 'active' : '') + '"><i class="nav_icon icon-email"></i>' + (data['email'] ? '已' : '未') + '绑定</span>',
        '</div></div>',
        '<div class="money"><span>账号余额：</span><div><span><b>' + (data['amount'] || 0) + '</b>刀币</span><a href="http://pay.wanmei.com/new/dota2/index.do?inGame=0" target="_blank">充值刀币</a></div></div>',
        '</div></div>'
    ];

    return html.join('');
}